<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 组织架构的内容 -->
      <el-card class="el-card">
        <el-tabs v-model="activeName">
          <el-tab-pane label="组织结构" name="departments" class="tree-card">
            <!-- <el-row type="flex" justify="space-between" align="middle" style="height: 40px;">
              <el-col>江苏传智播客教育科技股份有限公司</el-col>
              <el-col :span="4">
                <el-row justify="end" type="flex">
                  <el-col>
                    负责人
                  </el-col>
                  <el-col>
                    <el-dropdown trigger="click">
                      <span>
                        操作 <i class="el-icon-arrow-down" />
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>添加子部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row> -->
            <tree-tools :tree-node="company" :is-root="true" @addDepts="addDepts" />
            <el-tree :data="departs" :props="defaultProps" default-expand-all @node-click="handleNodeClick">
              <template v-slot="{data}">
                <tree-tools :tree-node="data" @delDepts="getDepartments" @addDepts="addDepts" @editDepts="handleEditDepts" />
              </template>
            </el-tree>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <add-dept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
    </div>

  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
export default {
  components: {
    TreeTools, AddDept
  },
  data() {
    return {
      showDialog: false, // 编辑或者新增弹框显示隐藏
      node: null, // 记录当前点击的node节点
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人', id: '' },
      activeName: 'departments',
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [
            {
              name: '董事会',
              manager: '曹丕'
            }
          ]
        },
        {
          name: '行政部',
          manager: '刘备'
        }, {
          name: '人事部',
          manager: '孙权'
        }
      ],
      defaultProps: {
        label: 'name'
      }
    }
  },
  mounted() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      const result = await getDepartments()
      this.company = { name: result.companyName, manager: result.companyManage || '李枫子', id: '' }

      this.departs = tranListToTreeData(result.depts, '')
    },
    // 监听tree-tools中触发的点击添加子部门的事件
    // node为当前点击的部门
    addDepts(node) {
      this.showDialog = true
      this.node = node
    },
    // 编辑编辑部门,显示编辑弹框(为什么不通过props传入id呢? 是因为prop是异步的)
    async handleEditDepts(node) {
      this.node = node
      // 应该在这里调用部门详情数据
      await this.$refs.addDept.getDepartDetail(node.id)
      this.showDialog = true
    },
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .el-card {
    padding: 20px 0 20px 40px;
  }

  .tree-card {
    padding: 30px 140px;
    font-size: 14px;
  }
}
</style>>

